<template>
  <div>
    <table>
      <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>昵称</td>
        <td>年龄</td>
        <td>性别</td>
        <td>操作</td>
      </tr>
      <tr v-for="(item, index) in userlist" :key="index">
        <td>{{ item.id }}</td>
        <td>{{ item.username }}</td>
        <td>{{ item.uaccount }}</td>
        <td>{{ item.uage }}</td>
        <td>{{ item.usex }}</td>
        <td>
          <van-button type="primary" color="pink" @click="remove(item.id)"
            >删除</van-button
          >
          <van-button type="primary" color="red" @click="upd(item.id)"
            >修改</van-button
          >
        </td>
      </tr>
    </table>

    <br /><br />
    <van-field v-model="list.username" label="名字" placeholder="名字" />
    <van-field v-model="list.uaccount" label="昵称" placeholder="昵称" />
    <van-field
      v-model="list.upwd"
      label="密码"
      placeholder="密码"
      type="password"
    />
    <van-field v-model="list.uage" label="年龄" placeholder="年龄" />
    <van-field v-model="list.usex" label="性别" placeholder="性别" />
    <van-button type="primary" color="blue" @click="add">增加</van-button>

    <van-field v-model="updlist.username" label="名字" placeholder="名字" />
    <van-field v-model="updlist.uaccount" label="昵称" placeholder="昵称" />
    <van-field v-model="updlist.uage" label="年龄" placeholder="年龄" />
    <van-field v-model="updlist.usex" label="性别" placeholder="性别" />
    <van-button type="primary" color="blue" @click="update">修改</van-button>
  </div>
  
  <div style="background-color: white">
    <van-nav-bar
      title="地址"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <van-address-list
      v-model="address"
      :list="user_address"
      default-tag-text="默认"
      @add="address_show = true"
      @edit="up_show"
      :switchable="false"
      :field-names="addNames"
    />
  </div>

  <!-- 地区 -->

  <van-popup
    v-model:show="show_region"
    round
    position="bottom"
    style="height: auth"
  >
    <van-cascader
      v-model="cascaderValue"
      title="请选择所在地区"
      :field-names="fieldNames"
      :options="CascaderList"
      @close="show_region = false"
      @finish="get_region"
    />
  </van-popup>

  <!-- 地址 -->

  <van-popup
    v-model:show="address_show"
    round
    position="bottom"
    class="add_address"
  >
    <van-form @submit="onSubmit">
      <van-field
        v-model="address_dict.nickname"
        name="收件人"
        label="收件人"
        placeholder="收件人"
      />
      <van-field
        v-model="address_dict.mobile"
        name="手机号"
        label="手机号"
        placeholder="手机号"
      />
      <van-field
        v-model="region"
        is-link
        readonly
        label="地区"
        placeholder="请选择所在地区"
        @click="show_region = true"
      />
      <van-field
        v-model="address"
        name="详细地址"
        label="详细地址"
        placeholder="详细地址"
        rows="2"
        autosize
        type="textarea"
        maxlength="128"
        show-word-limit
      />
      <van-cell center title="是否默认">
        <template #right-icon>
          <van-switch v-model="address_dict.is_default" size="24" />  
        </template>
      </van-cell>

      <van-button
        round
        block
        color="linear-gradient(to right, #ff8360, #ee0a24)"
        native-type="submit"
        class="address_button"
      >
        保存
      </van-button>
    </van-form>
  </van-popup>
</template>

<script>
export default {
  data() {
    return {
      userlist: [],
      updlist: [],
      list: {
        username: "",
        uaccount: "",
        uage: "",
        usex: "",
        upwd: "",
      },
    };
  },
  methods: {
    // 获取全部数据
    submit: function () {
      this.myaxios(this.weburl + "user/login/", "get").then((data) => {
        console.log(data);
        this.userlist = data.user;
        this.$toast.success(data.msg);
      });
    },
    remove: function (id) {
      this.myaxios(this.weburl + "user/users/" + id + "/", "delete").then(
        (data) => {
          console.log(data);
          this.$toast.success(data.msg);
        }
      );
    },
    upd: function (id) {
      this.myaxios(this.weburl + "user/users/" + id + "/", "get").then(
        (data) => {
          console.log(data);
          this.updlist = data;
          this.$toast.success(data.msg);
        }
      );
    },
    add: function () {
      this.myaxios(this.weburl + "user/users/", "post", {
        username: this.list.username,
        uaccount: this.list.uaccount,
        uage: this.list.uage,
        usex: this.list.usex,
        upwd: this.list.upwd,
      }).then((data) => {
        console.log(data);
        this.$toast.success(data.msg);
      });
    },
    update: function () {
      this.myaxios(
        this.weburl + "user/users/" + this.updlist.id + "/",
        "put",
        this.updlist
      ).then((data) => {
        console.log(data);
        this.$toast.success(data.msg);
      });
    },
  },
  created() {
    this.submit();
  },
};
</script>

<style scoped>
@import url("../assets/style.css");
</style>